<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="我的订单" left-arrow fixed @click-left="onClickLeft" />
        <div class="order_tabs">
            <van-tabs v-model="active" title-active-color="#31A653" :border="true" line-width="28px" class=""
                @change="getOrderListChange" color="#31A653">
                <van-tab title="全部" :title-style="{
            fontWeight: 600,
            fontSize: '14px'
        }"></van-tab>
                <van-tab title="待付款" :title-style="{
            fontWeight: 600,
            fontSize: '14px'
        }"></van-tab>
                <van-tab title="待收货" :title-style="{
            fontWeight: 600,
            fontSize: '14px'
        }"></van-tab>
                <van-tab title="已完成" :title-style="{
            fontWeight: 600,
            fontSize: '14px'
        }"></van-tab>
                <van-tab title="已取消" :title-style="{
            fontWeight: 600,
            fontSize: '14px'
        }"></van-tab>
            </van-tabs>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="padding-top:.8rem ;">
            <div class="order_all" v-for="item, index in orderList" :key="index">
                <div class="order_name">
                    <div class="order_name_left"> 
                        <img src="../../../images/mine/shop.png" alt="">{{ item.shop_name }}
                    </div>
                    <div class="order_name_right" :style="{ color: item.status_text == '交易关闭' ? '#999' : '#31A653' }">{{
            item.status_text }}</div>
                </div>
                <div class="" v-for="items, index in item.items" :key="index" @click="ordeInfo(item.id)">
                    <div class="order_lists">
                        <img :src="items.left_icon" alt="">
                        <div class="order_goods">
                            <div class="order_goods_name">{{ items.title }}</div>
                            <div class="order_goods_sku">{{ items.sku_text }}</div>
                            <div class="order_goods_price"><span>{{ items.price_text }}</span> <span>{{
            items.quantity_text }}</span></div>
                        </div>
                    </div>
                </div>
                <div class="order_total">{{ item.summary_text }}， 总计：<span>{{ item.summary_price_text || '¥0.00' }}</span></div>
                <div class="order_pay">
                    <div class="order_pay_money">
                        <div  v-if="item.summary_gift_gxz_text!=''">
                            赠贡献值：
                        <div  v-if="item.summary_gift_gxz_text!=''" class="order_price">{{ item.summary_gift_gxz_text||0 }}</div>
                        </div>
                        
                    </div>
                    <div style="display: flex;">
                        <div  v-for="itemBtn, index in item.buttons" :key="index"
                            @click="getOrder(itemBtn.key, item.id,item.after_sales_id,item.items)">
                            <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient( 136deg, #6EC069 0%, #42A633 100%)' : ''" round>{{
            itemBtn.name }}</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title" v-if="msg == 0">是否取消该订单？</div>
            <div class="popup_title" v-if="msg == 1">
				<div class="msg-title" >
					<div style="text-align: center;font-size: 0.28rem;font-weight: 500; margin-bottom: 0.2rem;color: #333;margin-top: -0.3rem;" >《用户确认收货需知》</div>
					<p>当您在点击“确认收货”按钮，确认该订单商品完成，即表示您已收到商品并且对其质量、数量、款式等方面无异议；我们将视为您对本次交易的完全认可，此后将不再接受任何关于该商品的退款申请；
</p>
					<p>请您在“确认收货”前务必仔细检查商品，确保其符合您的预期。点击确认收货是您对商品的最终认可，因此请谨慎操作。感谢您的支持与信任。</p>
				</div>
			</div>
            <div class="popup_title" v-if="msg == 2">是否删除该订单？</div>

            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="cancelPopup">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient( 136deg, #6EC069 0%, #42A633 100%)" round @click="orderSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { ORDERLIST,ORDER_CANCEL,ORDER_DELETE,ORDER_COMPLETE } from '@/api/mine';
// import { Dialog } from 'vant';
export default{
    data() {
        return {
            msg:0,
            show:false,
            active:0,
            orderList: [],
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      page: 1,
      pageSize:20,
      totalCount: 0,
      orderId:''
        }
    },
    created() {
        this.active=this.$route.query.id
        // this.getOrderList()
    },
    mounted() {
    window.scrollTo(0, 0)

    },
    // beforeRouteEnter(to, from, next) {
    //     next(vm => {
	// 		// console.log(from);
    //         if(from.name == 'mine' || from.name==null || from.name=='payResult') {
    //             vm.resetInit();
    //         }
    //     }) 
    // },
    methods:{
        onClickLeft() {
      this.$router.back();
    },
        // 订单列表
    //     getOrderList() {
    //   // 模拟API调用
    //   return new Promise((resolve) => {
    //     setTimeout(() => {
    //       let data = [
    //         { id: this.orderList.length + 1, name: `Order ${this.orderList.length + 1}` },
    //         { id: this.orderList.length + 2, name: `Order ${this.orderList.length + 2}` },
    //         { id: this.orderList.length + 3, name: `Order ${this.orderList.length + 3}` }
    //       ];
    //       resolve({ data: data, total: 20 }); // 假设总数是20
    //     }, 1000);
    //   });
    // },

    getOrderListChange(index) {
      this.active = index;
      // 数据请求
	  this.resetInit();
    },
    resetInit() {
        this.page = 1;
			  this.orderList = [];
			  this.finished = false;
			  this.loading = true;
			  this.onLoad()
    },
    onLoad() {
                 let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				params['status'] = this.active;
                this.$http.get(ORDERLIST, {params:params})
				.then(res => {
				  const {
				    list
				  } = res.data;

				  if(list && list.length) {
				     this.page++;
				     this.orderList = this.orderList.concat(list);
                    //  console.log(this.orderList);

				     // 加载状态结束
				     this.loading = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
    },
    // 详情
    ordeInfo(id){
        console.log(id);
        this.$router.push({path:"/orderInfo",query:{
            id:id,
            msg:0
        }})
    },
    // 按钮
    getOrder(key,id,after_sales_id,items){
        // 取消订单
        if(key=='order_cancel'){
            this.cancelOrder()
            this.orderId=id
        }else if(key=='order_payment'){
            // 立即付款
            // const currentOrder = this.orderList.find(order => order.id === id);
            // if (currentOrder) {
            //     // 将订单信息保存到localStorage
            //     localStorage.setItem('currentOrderInfo', JSON.stringify(currentOrder));
            // }
            // 去收银台
            this.$router.push({
                        name: 'cashier',
                     query: {
                         order_id: id
                        }
                })
        }else if(key=='after_sales_detail'){
            // 售后详情
            this.$router.push({
                    path:'/refundInfo',
                    query:{id:after_sales_id}
                })
        }else if(key=='after_sales_apply'){
            // s申请售后
            this.getAfterSales(id)
        }else if(key=='order_delivery_info'){
            // 查看物流
            this.$router.push({
                path:'/logistics',
                query:{id:id}
            })
        }else if(key=='order_complete'){
            // 确认收货
            this.submitTake()
            this.orderId=id
        }else if(key=='order_delete'){
            // 删除订单
            this.delOrder()
            this.orderId=id

        }else if(key=='order_repeat_purchase'){
            // 再次购买
            this.$router.push({
                path:'/good',
                query:{id:items[0].goods_id}
            })
        }
    },
    // 取消订单
    cancelOrder(){
        this.msg=0
        this.show=true
    },
    // 取消弹窗
    cancelPopup(){
        this.show=false
        this.orderId=''
    },
    // 确认收货
    submitTake(){
        this.msg=1
        this.show=true
    },
    // 删除订单
    delOrder(){
        this.msg=2
        this.show=true
    },
    // 弹窗确定按钮
    orderSubmit(){
        let order
        if(this.msg==0){
            // 取消订单
            order=this.$http.post(ORDER_CANCEL+this.orderId,)
        }else if(this.msg==1){
            // 确认收货
            order=this.$http.post(ORDER_COMPLETE+this.orderId)
            // 确认收货
        }else if(this.msg==2){
            order=this.$http.post(ORDER_DELETE+this.orderId)
            // 删除订单
        }
        order.then(res=>{
            this.show=false
            this.$toast.success(res.message);
            this.resetInit();
        }).catch(err=>{

        })
    },
    // 申请售后
    getAfterSales(id) {
            this.$router.push({path: '/afterSales',query:{id:id}})
        },
    }

}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    padding-top: 46px;
    min-height: 100vh;
    background: #F2F4F5;
    box-sizing: border-box;
    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}
.order_tabs{
    position: fixed;
    width: 100%;
    z-index: 999;
}
.order_all {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    // border: 0.01rem solid #999;
    // border-radius: 0.1rem;
    background: #fff;

    .order_name {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem 0.32rem 0 0.32rem;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        img {
            width: 0.4rem;
            height: .4rem;
            vertical-align: middle;
            margin-right: .16rem;
            margin-bottom: 0.06rem;
        }

        &_left {
            font-weight: bold;
        }

        &_right {
            font-size: 0.25rem;
        }
    }

    .order_lists {
        padding: 0 0.32rem;
        display: flex;
        justify-content: space-between;
        margin-top: 0.3rem;

        img {
            width: 1.8rem;
            height: 1.8rem;
        }

        .order_goods {
            width: 70%;
            font-size: 0.3rem;
            line-height: 0.6rem;

            &_name {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 0.35rem;
                font-size: 0.28rem;
                font-weight: bold;
            }

            &_sku {
                font-size: 0.24rem;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &_price {
                font-size: 0.32rem;
                font-weight: bold;
                display: flex;
                justify-content: space-between;
                margin-top: 0.3rem;

                span:last-child {
                    font-weight: 500;
                    font-size: 0.24rem;
                    color: #999;
                }
            }
        }
    }

    .order_total {
        // margin-left: 2.3rem;
        font-size: 0.25rem;
        margin-top: 0.2rem;
        text-align: right;
        margin-right: .2rem;

        span {
            color: rgba(249, 48, 27, 1);
            font-size: 0.32rem;
            font-weight: bold;
        }

        // bottom: 0;
    }

    .order_pay {
        // border-top: 0.01rem solid #999;
        display: flex;
        justify-content: space-between;
        padding: 0.36rem;

        .order_pay_money {
            font-size: 0.24rem;
            margin-top: 0.2rem;
            line-height: 0.4rem;

            .order_price {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .28rem;
                color: #31A653;
                // line-height: 20px;
                text-align: left;
                font-style: normal;
            }
        }
        .order_pay_btn {
        margin-left: 0.2rem;
        margin-top: 0.2rem;
        padding: 0.12rem 0.24rem;
        font-size: 0.28rem;
        border: 1px solid #e3e3e3;
        border-radius: .44rem;
      }
    }
}

.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
        border-radius: .44rem;
    }

}
.msg-title{
	text-align: left;
	padding: 0 0.2rem;
	font-size: 0.24rem;
}
</style>
